<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8"/>
    <title>主页</title>
    <script src="jquery.min.js"></script>
    <script src="communication-0.0.2.min.js"></script>
    <script type="text/javascript">
        var wsurl = "ws://localhost:8081/communication/websocket"
        var url = "http://localhost:8081/communication"

        function connect() {
            //通过app后台获取token
            $.post("token?userName=" + $("#user-name").val(), function (result) {
                var r = JSON.parse(result);
                var token = r.data;
                communication.init({
                    wsurl: wsurl,
                    url: url,
                    token: token,
                    onmessage: function (data) {
                        $("#receiveMsg").val($("#receiveMsg").val() + "接收消息------>" + data + "\r\n");
                    }
                })


            });
        }

        function send() {
            //发送消息至websocket服务器
            if (null == $("#input-file").val() || "" == $("#input-file").val()) {
                var object = new Object();
                object.to = $("#receiver").val();
                object.text = $("#message").val();
                object.code = 100;
                communication.send(JSON.stringify(object))
                $("#receiveMsg").val($("#receiveMsg").val() + "发送消息------>" + $("#receiver").val() + "--->:" + $("#message").val() + "\r\n");
            } else {
                var object = new Object();
                object.to = $("#receiver").val();
                object.text = $("#message").val();
                object.code = 100;
                object.type = "image";
                object.files = new Array();
                object.files.push($("#input-file")[0].files[0]);
                object.files.push($("#input-file")[0].files[0]);
                communication.sendFile(object);
            }
        }

    </script>
</head>
<body>
<h1>Welcome !!!</h1>
用户名:<input type="text" id="user-name"/> <input type="button" value="连接" onclick="connect()"/>
<br/>
发送消息:<br/>
接受者:<input type="text" id="receiver"/><br/>
消息:<input type="text" id="message"/><br/>
<input type="button" value="发送" onclick="send()"/>
<input type="file" id="input-file" multiple="multiple"/>
<br/>


<br/>
接受消息:<br/>
<textarea id="receiveMsg" style="height: 250px;width: 800px;" readonly="true"></textarea>

</body>
</html>